<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Welcome to Car Rent Inc</title>
</h:head>

<ui:composition template="/client/templates/frame.xhtml">
	<ui:define name="page">
		<h:form>
			<rich:dataTable value="#{newRequestManagedBean.requests}" var="item"
				iterationStatusVar="it" id="newRequestTable" border="1" styleClass="center">

				<f:facet name="header">
					<h:outputText value="New Car Requests" />
				</f:facet>

				<rich:column>
					<f:facet name="header">#</f:facet>
                #{it.index}
            </rich:column>

				<rich:column>
					<f:facet name="header">Client</f:facet>
					<h:outputText value="#{item.client.firstName} " />
					<h:outputText value="#{item.client.lastName}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Car</f:facet>
					<h:outputText value="#{item.car.manufacturer} " />
					<h:outputText value="#{item.car.model}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Car Number</f:facet>
					<h:outputText value="#{item.car.number}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Begin Date</f:facet>
					<h:outputText value="#{item.beginDate}">
						<f:convertDateTime pattern="dd.MM.yyyy" />
					</h:outputText>
				</rich:column>
				<rich:column>
					<f:facet name="header">End Date</f:facet>
					<h:outputText value="#{item.endDate}">
						<f:convertDateTime pattern="dd.MM.yyyy" />
					</h:outputText>
				</rich:column>

				<rich:column>
					<f:facet name="header">Action</f:facet>
					<h:panelGrid columns="2">

						<a4j:region>
							<a4j:commandLink action="#{newRequestManagedBean.initRequest}"
								execute="@this"
								onclick="#{rich:component('approvePane')}.show()">
								<h:graphicImage value="/images/approve.gif" alt="approve" />
							</a4j:commandLink>
						</a4j:region>
						<a4j:region>
							<a4j:commandLink action="#{newRequestManagedBean.initRequest}"
								execute="@this" onclick="#{rich:component('cancelPane')}.show()">
								<h:graphicImage value="/images/cancel.gif" alt="cancel" />
							</a4j:commandLink>
						</a4j:region>

					</h:panelGrid>
				</rich:column>
				<f:facet name="footer">
					<rich:dataScroller page="#{newRequestManagedBean.page}" />
				</f:facet>
			</rich:dataTable>

			<rich:popupPanel id="approvePane" autosized="true"
				onmaskclick="#{rich:component('approvePane')}.hide()">
            Are you sure you want to approve request?
            <a4j:commandButton value="Approve request"
					action="#{newRequestManagedBean.approveRequest}"
					render="newRequestTable" execute="@this"
					oncomplete="#{rich:component('approvePane')}.hide(); return false;" />
				<a4j:commandButton value="Cancel"
					onclick="#{rich:component('approvePane')}.hide(); return false;" />
			</rich:popupPanel>

			<rich:popupPanel header="Cancel request" id="cancelPane"
				onmaskclick="#{rich:component('cancelPane')}.hide()"
				domElementAttachment="parent" autosized="true">

				<h:panelGrid columns="2">
					<h:outputText value="Cancellation purpose: " />
					<h:inputText
						value="#{newRequestManagedBean.request.cancellationPurpose}"
						required="true" />
				</h:panelGrid>
				<a4j:commandButton value="Approve cancellation"
					action="#{newRequestManagedBean.cancelRequest}"
					render="newRequestTable"
					oncomplete="#{rich:component('cancelPane')}.hide(); return false;" />
				<a4j:commandButton value="Cancel"
					onclick="#{rich:component('cancelPane')}.hide(); return false;" />

			</rich:popupPanel>

		</h:form>
	</ui:define>
</ui:composition>
</html>